<template>
	<view class="content">
		<view class="body-header">
			<uni-card class="tab-card" title="掘金" thumbnail="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6bdafd801c878b10edb5fed5d00969e9.svg" extra="我的主页" @click="handleJuejin">
			    <view class="card-content">
					<image :src="juejin.avatar_large" class="avatar"></image>
					<view class="card-info">
						<view class="card-item">
							<h2>{{juejin.user_name}}</h2>
							<uni-tag style="margin-left: 10rpx;" :text="'Lv'+juejin.level" size="small" circle="true" type="primary"></uni-tag>
						</view>
						<view class="card-item">
							<uni-icons type="home-filled" color="#8F8F8F"></uni-icons>
							<p style="margin-left: 10rpx;">{{juejin.job_title}} | {{juejin.company}}</p>
						</view>
						<view class="card-item">
							<uni-icons type="info" color="#8F8F8F"></uni-icons>
							<p style="margin-left: 10rpx;">{{juejin.description}}</p>
						</view>
						<view class="last-line">
							<uni-tag style="margin-left: 10rpx;" :text="'点赞'+juejin.got_digg_count" size="small" type="primary"></uni-tag>
							<uni-tag style="margin-left: 10rpx;" :text="'阅读'+juejin.got_view_count" size="small" type="primary"></uni-tag>
							<uni-tag style="margin-left: 10rpx;" :text="'掘力值'+juejin.power" size="small" type="primary"></uni-tag>
						</view>
					</view>
				</view>
			</uni-card>
			<uni-card class="tab-card" title="github" thumbnail="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" extra="我的主页" @click="handleGithub" >
			    <view class="card-content">
					<image :src="github.avatar_url" class="avatar"></image>
					<view class="card-info">
						<view class="card-item">
							<h2>{{github.name}}</h2>
						</view>
						<view class="card-item">
							<image src="../../static/report.svg" style="width: 40rpx; height: 40rpx;" mode=""></image>
							<p style="margin-left: 10rpx;">开源项目：{{github.public_repos}}</p>
						</view>
						<view class="card-item">
							<image src="../../static/start.svg" style="width: 40rpx; height: 40rpx;" mode=""></image>
							<p style="margin-left: 10rpx;">粉丝：{{github.followers}}</p>
						</view>
					</view>
				</view>
				
			</uni-card>
			<cxy-card class="tab-card" title="社交" >
				<view class="card-content">
					<view class="card-info">
						<h3>Wechat</h3>
						<view class="card-item">
							<image src="/static/wechat.svg" style="width: 55rpx; height: 55rpx; margin-right: 10rpx"></image>
							<p>cxyxxx0924</p>
						</view>
						<h3 style="margin-top: 10rpx;">E-mail</h3>
						<view class="card-item">
							<image src="/static/mail.svg" style="width: 55rpx; height: 55rpx; margin-right: 10rpx;"></image>
							<p>573099498@qq.com</p>
						</view>
					</view>
				</view>
			</cxy-card>
		</view>
		<view class="profile">
			<uni-card title="Profile">
			    <p>自我介绍</p>
				<p>朋友们大家好</p>
				<p>很高兴能光临我的博客（uni-app版），我的名字叫陈新游</p>
				<p>我是一名前端兼Node后端工程师</p>
				<p>2016年毕业于温州大学，从事的第一份工作是安卓开发。在工作中接触到了react-native、nodejs和vue。我就这样从一个安卓开发工程师慢慢转变成为了一名JS系的开发工程师</p>
				<p>熟练掌握前端必备技能 JavaScripts,Html,Css 熟练使用 Typescript,ES6,Koa2,egg,MongoDB,Vue,uni-app ...</p>
				<p>毕业多年，参与过多个项目的开发，有独立开发和协同开发的经验。在2019年考取了PMP项目管理认证</p>
				<p>最后附上我的<a href="https://p57umkb22o.feishu.cn/docs/doccn2ySh24YbHLgJoSYuAzGTCw?from=from_copylink">简历</a>，如果公司在上海且需要招聘前端开发工程师可以联系我</p>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {request} from '@/common/request'
	import cxyCard from '@/components/cxyCard.vue'
	export default {
		data() {
			return {
				categories: [],
				juejin: {},
				github: {}
			}
		},
		components: {
			cxyCard
		},
		async onLoad() {
			await this.loadJuejin()
			await this.loadGithub()
			
		},
		methods: {
			async loadJuejin() {
				const {result} = await request('getJuejinInfo')
				console.log('load juejin')
				if(result.code === 0) {
					this.juejin = result.data
				} else {
					uni.showToast({
						title: result.message,
						duration: 3000
					})
				}
			},
			async loadGithub() {
				const {result} = await request('getGithubInfo')
				console.log('load github')
				if(result.code === 0) {
					this.github = result.data
				} else {
					uni.showToast({
						title: result.message,
						duration: 3000
					})
				}
			},
			async handleItem(cid) {
				const ret = await request('getAppsByCategory', {cid})
				console.log('ret', ret)
			},
			handleJuejin() {
				window.open('https://juejin.cn/user/3007907048723991')
			},
			handleGithub() {
				window.open('https://github.com/cxyxxx0924')
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		.body-header {
			display: flex;
			flex-direction: row;
			width: 100%;
			flex-wrap: wrap;
			justify-content: center;
		}
		.tab-card {
			flex: none;
			width: 30%;
			.last-line {
				display: flex;
				width: 100%;
				flex-direction: row;
				justify-content: flex-end;
			}
		}
		.profile {
			display: flex;
			padding: 5rpx;
			width: 50%;
			align-self: flex-start;
		}
		.card-content {
			display: flex;
			flex-direction: row;
			.card-item {
				display: flex;
				flex-direction: row;
				margin: 10rpx 0;
				text-align: center;
				align-items: center;
			}
			.line-one {
				align-items: flex-start;
			}
		}
		.card-info {
			margin-left: 10rpx;
			display: flex;
			flex-direction: column;
		}
		.avatar {
			width: 200rpx; 
			height: 200rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
	}
</style>
